<template>
    <div id="success">
        <HeaderBg>
            <Headers :title="$t('applyForOk.successHeader')" />
        </HeaderBg>
        <div class="success-container">
            <div class="success-icon">
                <img src="../../assets/success_icon.png" alt="">
            </div>
            <p>{{$t('applyForOk.successText')}}</p>
        </div>
        <div class="returns" @click="$router.replace('/my')">{{$t('applyForOk.returns')}}</div>
    </div>
</template>

<script>
import HeaderBg from 'components/HeaderBg'
    export default {
        name:'success',
        components:{
            HeaderBg
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl';
#success
    positCenter(0,0,0,0,0,0)
    width 100%
    background-color $bodyBg
    .success-container
        positCenter(50%,50%,auto,auto,-50%,-50%)
        .success-icon
            margin 0 auto
            width rem(90)
            height rem(90)
            img
                width 100%
                height 100%
        p
            font-size rem(18)
            color $fontColor
            margin-top rem(29)
    .returns
        position absolute
        bottom rem(114)
        left 50%
        transform translateX(-50%)
        margin-top rem(110)
        width 80%
        line-height rem(50)
        font-size rem(15)
        border-radius rem(25)
        color $fontColor
        background-color $tabBarActive
</style>
